<template>
  <a-layout hasSider>
    <a-layout-sider style="backgroundColor:#3c3f41">
      <div class="controller-bar">
        <a-space>
          <FileAddOutlined style="color:#FFFFFF80;font-size:18px" />
        </a-space>
      </div>
      <div style="padding:10px">
        <a-radio-group v-model:value="activeCode">
          <a-radio v-for="item in codeListRef" :key="item.id" :value="item.id"
            :style="{display: 'flex', width: '174px'}" @click="changeTemplateCode(item)">
            <a-typography-paragraph v-model:content="item.name" editable />
          </a-radio>
        </a-radio-group>
      </div>
    </a-layout-sider>
    <a-layout-content>
      <CodeEditor :value="code" @save="saveCode" />
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import CodeEditor from "./CodeEditor/Index.vue";
import { FileAddOutlined } from "@ant-design/icons-vue";
import { codeList, codeSave } from "@/api/api";
import { message } from "ant-design-vue";
import { activeCode, activeCodeItem } from "@/settings/local";
function useCodeList() {
  const codeListRef = ref<{id:string,name:string,content:string}[]>([]);

  function loadList() {
    codeList().then((res) => {
      codeListRef.value = res.data;
    });
  }

  onMounted(() => loadList());

  return {
    codeListRef,
    loadList,
  };
}

export default defineComponent({
  components: {
    CodeEditor,
    FileAddOutlined,
  },
  setup() {
    const code = ref("");

    onMounted(() => {
      code.value = activeCodeItem.value.content as string
    });
    //代码模板列表
    const { codeListRef, loadList } = useCodeList();

    function changeTemplateCode(item: { id: string; content: string }) {
      code.value = item.content;
      activeCodeItem.value = item;
    }

    function saveCode(content: string) {
      const c = { ...activeCodeItem.value, content };
      codeSave(c).then((res) => {
        if (res.code == 1) {
          message.error("失败 ！！！");
        } else {
          loadList();
          message.success("保存成功");
        }
      });
    }

    return {
      code,
      codeListRef,
      changeTemplateCode,
      saveCode,
      activeCodeItem,
      activeCode,
    };
  },
});
</script>
<style lang="less" scoped>
.controller-bar {
  height: 32px;
  background-color: #3c3f41;
  border-bottom: 1px solid #323232;
  line-height: 32px;
  padding-left: 10px;
}

:deep(.ant-list-bordered.ant-list-sm .ant-list-item) {
  color: #fff;
  cursor: pointer;
}

:deep(.ant-typography) {
  color: #fff;
}
</style>
